<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/GetCustomerview">客户信息</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 条件查询 -->
  <div style="margin-top: 20px; width: 900px">
    <el-form :inline="true">
      <el-form-item label="客户编号">
        <el-input v-model="page.CustomerNo" />
      </el-form-item>
      <el-form-item label="客户名称" style="margin-left: -20px">
        <el-input v-model="page.CustomerName" />
      </el-form-item>
      <el-form-item label="客户简称" style="margin-left: -20px">
        <el-input v-model="page.Customerabbrevias" />
      </el-form-item>
      <el-form-item label="客户英文名称">
        <el-input v-model="page.CustomerEng" />
      </el-form-item>
      <el-form-item label="是否启用:" style="margin-left: -20px; width: 180px">
        <el-select v-model="page.Isok" placeholder="请选择">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCustomer()">搜索</el-button>
        <el-button type="primary" @click="empty()">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 显示 -->
  <div style="margin-top: 20px">
    <el-button type="primary" size="small" @click="open(null)">新增</el-button>
    <el-button type="warning" size="small" @click="GetExelRoomNumber"
      >导出</el-button
    >
    <el-button type="info" size="small" @click="ImportRoomNumber"
      >导入</el-button
    >

    <el-table
      :data="tableData"
      style="width: 100%"
      ref="multipleTableRef"
      row-key="customerId"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="customerNo" label="客户编码" width="180"
        ><template #default="scope">
          <el-button link type="primary" size="small" @click="open(scope.row)">
            {{ scope.row.customerNo }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称"
        width="180"
        style="font-weight: bold"
      />
      <el-table-column prop="customerEng" label="客户简称" width="180" />
      <el-table-column prop="customerTypeName" label="客户类型" width="180" />
      <el-table-column prop="customerAddress" label="客户电话" width="180" />
      <el-table-column prop="customeroffadd" label="联系人" width="180" />
      <el-table-column prop="customeremadd" label="联系人-电话" width="180" />
      <el-table-column prop="isok" label="是否启用" width="180">
        <template #default="scope">
          {{ scope.row.isok == 1 ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="open(scope.row)"
            >修改</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="delCustomer(scope.row.customerId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        v-model:current-page="page.PageIndex"
        v-model:page-size="page.PageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 新增 -->
  <div>
    <el-dialog
      v-model="Eject.dialogFormVisible"
      :title="Eject.title"
      width="1000"
    >
      <el-form :model="form" :inline="true">
        <el-form-item label="客户编码:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerNo"
            autocomplete="off"
            style="width: 180px; height: 30px"
            :readonly="form.autoGenerate"
            clearable
            @click.native="handleCodeClick"
          />
          <template slot="prepend">R</template>
          <el-switch
            width="40"
            v-model="form.autoGenerate"
            active-text="自动生成"
            active-color="#67C23A"
            @change="handleSwitchChange"
          />
        </el-form-item>
        <el-form-item label="客户名称:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerName"
            placeholder="请输入名称名称"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="客户简称:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerabbrevias"
            placeholder="请输入客户简称"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="客户英文名称:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerEng"
            placeholder="请输入客户英文名称"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="客户类型:" :label-width="Eject.formLabelWidth">
          <el-select
            v-model="form.customerTypeId"
            placeholder="请选择客户类型"
            style="width: 150px; height: 30px"
          >
            <el-option :value="0" label="请选择客户类型"></el-option>
            <el-option
              v-for="item in types"
              :label="item.customerTypeName"
              :value="item.customerTypeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户简介:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerdescris"
            style="width: 800px; margin-left: 10px"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="客户地址:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerAddress"
            style="width: 800px; margin-left: 10px"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="客户官网地址:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customeroffadd"
            placeholder="请输入客户官网地址"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="客户邮箱地址:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customeremadd"
            placeholder="请输入客户邮箱地址"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="客户电话:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerphone"
            placeholder="请输入客户电话"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="客户LOGO:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerlogo"
            placeholder="请输入客户LOGO"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="联系人1:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.contactone"
            placeholder="请输入联系人1"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="联系人1-电话:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.contactphoneone"
            placeholder="请输入联系人1-电话"
            style="width: 150px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="联系人1-邮箱:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.contactemailone"
            placeholder="请输入联系人1-邮箱"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="联系人2:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.contacttwo"
            placeholder="请输入联系人2"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="联系人2-电话:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.contactphonetwo"
            placeholder="请输入联系人2-电话"
            style="width: 150px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="联系人2-邮箱:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.contactemailtwo"
            placeholder="请输入联系人2-邮箱"
            style="width: 180px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="社会信用代码:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.socialCredit"
            placeholder="请输入社会信用代码"
            style="width: 260px; height: 30px"
          />
        </el-form-item>
        <el-form-item label="是否有效:" prop="enable">
          <el-radio-group v-model="form.isok">
            <el-radio label="是" :value="true" />
            <el-radio label="否" :value="false" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="form.customerremark"
            style="width: 800px; margin-left: 10px"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            maxlength="100"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="createCustomer()">保存</el-button>
          <el-button type="primary" @click="Eject.dialogFormVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

import axios from "axios";
import { pa, ro } from "element-plus/es/locales.mjs";
const apiUrl = import.meta.env.VITE_APP_API_URL;
const router = useRouter();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const tableData = ref([]);
onMounted(() => {
  getCustomer();
  //  getType();
});
const page = reactive({
  PageIndex: 1,
  PageSize: 10,
  CustomerNo: "",
  CustomerName: "",
  Customerabbrevias: "",
  CustomerEng: "",
  Isok: null,
  totalCount: 1,
  totalPage: 1,
});
// 获取客户信息
const getCustomer = () => {
  axios
    .get(apiUrl+"/T5/Customer/GetCustomer", { params: page })
    .then((res) => {
      tableData.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.totalPage = res.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};
// 清空
const empty = () => {
  page.CustomerNo = "";
  page.CustomerName = "";
  page.CustomerEng = "";
  page.Customerabbrevias = "";
  page.Isok = null;
  getCustomer();
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  page.PageSize = val;
  getCustomer();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.PageIndex = val;
  getCustomer();
};
// 新增、编辑
const Eject = reactive({
  dialogFormVisible: false,
  title: "添加部门",
  formLabelWidth: "120px",
  Isture: true,
});

const form = reactive({
  customerId: 0,
  customerNo: "",
  customerName: "",
  customerabbrevias: "",
  customerEng: "",
  customerTypeId: 0,
  customerdescris: "",
  customerAddress: "",
  customeroffadd: "",
  customeremadd: "",
  customerphone: "",
  customerlogo: "",
  contactone: "",
  contactphoneone: "",
  contactemailone: "",
  contacttwo: "",
  contactphonetwo: "",
  contactemailtwo: "",
  socialCredit: "",
  customerremark: "",
  isok: false,
  autoGenerate: false,
});

// 生成部门编号
const generateCode = () => {
  const timestamp = Date.now(); // 获取精确到毫秒的时间戳
  form.customerNo = `BM${timestamp}`;
};

const handleSwitchChange = (val: boolean) => {
  form.autoGenerate = val;
  if (val) {
    generateCode(); // 开启自动生成时立即生成1
  } else {
    form.customerNo = ""; // 关闭时清空编号
  }
};

const handleCodeClick = () => {
  if (form.autoGenerate) {
    generateCode(); // 点击输入框时重新生成
  }
};

const open = (row: any) => {
  if (row == null) {
    Eject.dialogFormVisible = true;
    Eject.title = "新增客户信息";
    Eject.Isture = true;
    getType();
    (form.customerId = 0),
      (form.customerNo = ""),
      (form.customerName = ""),
      (form.customerabbrevias = ""),
      (form.customerEng = ""),
      (form.customerTypeId = 0),
      (form.customerdescris = ""),
      (form.customerAddress = ""),
      (form.customeroffadd = ""),
      (form.customeremadd = ""),
      (form.customerphone = ""),
      (form.customerlogo = ""),
      (form.contactone = ""),
      (form.contactphoneone = ""),
      (form.contactemailone = ""),
      (form.contacttwo = ""),
      (form.contactphonetwo = ""),
      (form.contactemailtwo = ""),
      (form.socialCredit = ""),
      (form.customerremark = ""),
      (form.isok = false),
      (form.autoGenerate = false);
  } else {
    Eject.dialogFormVisible = true;
    Eject.title = "修改客户信息";
    Eject.Isture = false;
    getType();
    (form.customerId = row.customerId),
      (form.customerNo = row.customerNo),
      (form.customerName = row.customerName),
      (form.customerabbrevias = row.customerabbrevias),
      (form.customerEng = row.customerEng),
      (form.customerTypeId = row.customerTypeId),
      (form.customerdescris = row.customerdescris),
      (form.customerAddress = row.customerAddress),
      (form.customeroffadd = row.customeroffadd),
      (form.customeremadd = row.customeremadd),
      (form.customerphone = row.customerphone),
      (form.customerlogo = row.customerlogo),
      (form.contactone = row.contactone),
      (form.contactphoneone = row.contactphoneone),
      (form.contactemailone = row.contactemailone),
      (form.contacttwo = row.contacttwo),
      (form.contactphonetwo = row.contactphonetwo),
      (form.contactemailtwo = row.contactemailtwo),
      (form.socialCredit = row.socialCredit),
      (form.customerremark = row.customerremark),
      (form.isok = row.isok),
      (form.autoGenerate = row.autoGenerate);
  }
};

// 新增、编辑
const createCustomer = () => {
  if (Eject.Isture) {
    axios.post(apiUrl+"/T6/Customers/CreateCustomers", form).then((res) => {
      if (res.data.code == 100) {
        ElMessage.success(res.data.msg);
        Eject.dialogFormVisible = false;
        getCustomer();
        return;
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  } else {
    axios.put(apiUrl+"/T6/Customers/UpdataCustomers", form).then((res) => {
      console.log(res);
      if (res.data.code == 206) {
        ElMessage.success(res.data.msg);
        Eject.dialogFormVisible = false;
        getCustomer();
        return;

      } else {
        ElMessage.error(res.data.msg);
      }
    });
  }
};

// 获取客户类型11112343
const types = ref([]);
const getType = () => {
  axios.get(apiUrl+"/T5/Customer/GetCustomertype").then((res) => {
    types.value = res.data.data;
  });
};

// 删除客户
const delCustomer = (customerId: number) => {
  axios
    .put(apiUrl+"/T6/Customers/DelCustomers", {
      customerId: customerId,
    })
    .then((res) => {
      if (res.data.code == 204) {
        ElMessage.success(res.data.msg);
        getCustomer();
        return;
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};

// 导出客户信息
const GetExelRoomNumber = async () => {
  let url =  apiUrl+`/T5/Customer/ExeclCustomer`;

  window.location.href = url;
  getCustomer();
};

// 导入客户信息
const ImportRoomNumber = async () => {
  console.log("执行导入操作");
  const input = document.createElement("input");
  input.type = "file";
  input.accept = ".csv, .xlsx"; // 可以根据实际需求修改允许的文件类型

  input.addEventListener("change", async (event) => {
    const file = event.target.files[0];
    if (file) {
      const formData = new FormData();
      formData.append("file", file);

      axios
        .post(apiUrl+"/T6/Customers/ImportCustomers", formData)
        .then((res) => {
          if (res.data.code == 100) {
            ElMessage.success(res.data.msg);
            getCustomer();
            return;
          } else {
            ElMessage.error(res.data.msg);
          }
        });
    }
  });

  input.click();
};
</script>

<style scoped>
</style>